<script setup>
import { unref } from 'vue'

const props = defineProps({
    src: {
        type: String,
        required: true
    },
    status: {
        type: String,
        default: 'normal'
    },
    size: {
        type: String,
        default: '45px'
    },
    localImageSize: {
        type: String,
        default: '35px'
    },
    basecolor: String,
    borderColor: String,
    borderColorActive: String
})

const size = unref(props.size)
const localImageSize = unref(props.localImageSize)
const localUrl = props.src.includes('http') ? '' : `./animals/${props.src}`

function renderDefaultImage(event) {
    // 若图片加载失败则不显示
    event.target.style.display = 'none'
}
</script>

<template>
    <div class="avartar-container">
        <div class="avartar-img-container">
            <div v-if="localUrl" class="animal-avartar-cover">
                <img :src="localUrl" />
            </div>
            <img v-else class="normal-avartar-cover" :src="src" @error="renderDefaultImage" />
        </div>
        <div v-if="status == 'online'" class="online-indicator-container">
            <div class="online-indicator"></div>
        </div>
    </div>
</template>

<style scoped lang="scss">
@import '@renderer/assets/scss/mixins';

$local-image-bgcolor: white;
$local-image-size: v-bind(localImageSize);

.avartar-container {
    @include set-size(v-bind(size), v-bind(size));
    position: relative;

    .avartar-img-container {
        @include overspread;
        @include set-border($color: v-bind(borderColor), $width: 2px);
        border-radius: 50%;
        overflow: hidden;

        // 设置加载时和加载失败的默认图片
        background: {
            image: url('@renderer/assets/img/panda_monochrome.png');
            repeat: no-repeat;
            position: center;
            size: v-bind(size) v-bind(size);
        }

        .normal-avartar-cover {
            @include overspread;
        }
        .animal-avartar-cover {
            @include overspread;
            background-color: $local-image-bgcolor;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                @include set-size(40px, 40px);
            }
        }
    }

    .online-indicator-container {
        @include set-size(15px, 15px);
        position: absolute;
        right: -1px;
        bottom: -1px;
        background-color: v-bind(basecolor);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;

        .online-indicator {
            @include set-size(12px, 12px);
            background-color: var(--online-color);
            border-radius: 50%;
        }
    }

    &:hover {
        .avartar-img-container {
            box-shadow: 0 0 0 2px v-bind(borderColorActive);
        }
    }
}
</style>
